<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('表单校验')" />
</head>
<body class="gray-bg">
<form class="form-horizontal" id="form-listen-add">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="commentForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">学生姓名：</label>
                            <div class="col-sm-8">
                                <input id="listenStudentName" name="listenStudentName" minlength="2" type="text" class="form-control"  required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">学生班级：</label>
                            <div class="col-sm-8">
                                <input id="listenGrade" name="listenGrade"  type="text" class="form-control" required >

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label ">学生状态：</label>
                            <div class="col-sm-8">
                                <select name="listenStatus" class="form-control">
                                    <option th:value="1" >试听中</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label ">学生性别：</label>
                            <div class="col-sm-8">
                                <select name="listenSex" class="form-control" th:with="type=${@dict.getType('sys_user_sex')}">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">学生身份证：</label>
                            <div class="col-sm-8">
                                <input id="listenStudentCard" type="text" class="form-control" name="listenStudentCard" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">城市：</label>
                            <div class="col-sm-8">
                                <select name="" id="sheng" class="form-control" required>
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                    </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" >县区：</label>
                            <div class="col-sm-8">
                                <select name="listenPlace" id="shi" class="form-control" required>
                                    <option value="" >请先选择省</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">学生手机号：</label>
                            <div class="col-sm-8">
                                <input id="listenStudent_Number" type="text" class="form-control" name="listenStudent_Number" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <button class="btn btn-primary" type="submit" onclick="submitHandler()">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
<th:block th:include="include :: footer" />
<script>
    // 定义省
    var shengArr = [
        {
            id: '1',
            val: '邯郸市'
        },
        {
            id: '2',
            val: '河南'
        },
        {
            id: '3',
            val: '黑龙江'
        }
    ]
    // 定义市
    var shiArr = [
        {
            pid: '1',
            id: '肥乡区',
            val: '肥乡区',
        },
        {
            pid: '1',
            id: '武安市',
            val: '武安市'
        },
        {
            pid: '1',
            id: '成安县',
            val: '成安县'
        },
        {
            pid: '2',
            id: '洛阳',
            val: '洛阳'
        },
        {
            pid: '2',
            id: '南阳',
            val: '南阳'
        },
        {
            pid: '2',
            id: '新乡',
            val: '新乡'
        },
        {
            pid: '3',
            id: '鸡西',
            val: '鸡西'
        },
        {
            pid: '3',
            id: '哈尔滨',
            val: '哈尔滨'
        }
    ]

    // 动态添加省
    for (var i = 0; i < shengArr.length; i++) {
        $('#sheng').append('<option value=' + shengArr[i].id + ' >' + shengArr[i].val + '</option>')
    }
    // 二级联动
    $("#sheng").change(function () {
        // 获取当前的idconsole.log($(this).val())

        // 动态添加之前要清空之前的。
        $('#shi option').remove()
        for (var j = 0; j < shiArr.length; j++) {
            if ($(this).val() == shiArr[j].pid) {
                $('#shi').append('<option value=' + shiArr[j].id + '>' + shiArr[j].val + '</option>')
            }
        }

    })
</script>
<script th:inline="javascript">
    /*
<![CDATA[*/
    contextPath = /*[[@{/}]]*/'';
    /*]]
    */
    var prefix = contextPath + "system/listen";
    $(function(){
        $("#commentForm").validate({
            onkeyup: false,
                rules:{
                    listenGrade:{
                        nnm:true
                    },
                    listenStudent_Number:{
                        isPhone:true,
                    },
                    listenStudentCard:{
                        isIdentity:true
                    },

            },
                focusCleanup: true

        }

        );

    });
    function submitHandler() {
        if ($.validate.form()) {
            var listenStudentName = $("#listenStudentName").val();
            var listenGrade = $("#listenGrade").val();
            var data = $("#form-listen-add").serializeArray();

            var roleIds = $.form.selectCheckeds("listenPlace").value;
            var postIds = $.form.selectSelects("shi");
            var formStr=$('#form-listen-add').serialize();
            params = decodeURIComponent(formStr,true);
            console.log(params)
            $.operate.saveTab(prefix + "/add", data);
        }




    }
</script>
</body>
</html>
